<template>
	<view class="page_wrapper">
		<view class="app_list_title">帮助列表</view>
		<view v-for="(article, index) in articleList" class="article_item_block" @click="showDetail(article)">
			<view>{{index + 1}}. {{article.title}}</view>
			<view class="right_btn">
				<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
			</view>
		</view>
		<view class="mini_app_list_block">
			<view class="app_list_title">开发者其他小程序</view>
			<view v-for="(miniApp, index) in miniAppList"  class="article_item_block" @click="toMiniApp(miniApp)">
				<view>{{index + 1}}. {{miniApp.appName}}</view>
				<view class="right_btn">
					<image class="menu_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				articleList: [],
				miniAppList: []
			}
		},
		onShow() {
			this.fetchData()
			this.fetchMiniAppsData()
		},
		methods: {
			fetchData() {
				const wechatOpenId = getApp().globalData.wechatOpenId
				request.get(
					'/articles/search', 
					{categoryId: 1}
				).then(res => {
					this.articleList = res.items
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			fetchMiniAppsData() {
				request.get(
					'/miniApps/search', {}
				).then(res => {
					const accountInfo = uni.getAccountInfoSync();
					const appId = accountInfo.miniProgram.appId
					this.miniAppList = res.items.filter(item => item.appId !== appId)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			showDetail(article) {
				uni.navigateTo({
					url: '/pages/articleDetail/articleDetail?articleNo=' + article.articleNo
				})
			},
			toMiniApp(miniApp) {
				uni.navigateToMiniProgram({
					appId: miniApp.appId,
					path: miniApp.appPath,
					envVersion: 'release', 
					success(res) {
						// 打开成功
						console.log("跳转小程序成功！",res);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.app_list_title{
			font-size: 17px;
			font-weight: 500;
			color: dimgray;
			background-color: lightblue;
			padding: 10px;
			padding-left: 20px;
		}
		.article_item_block{
			margin-left: 15px;
			margin-right: 15px;
			height: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #e2e2e2;
			.right_btn{
				width: 20px;
				display: flex;
				justify-content: right;
				align-items: center;
				.menu_icon{
					width: 16px;
					height: 16px;
				}
			}
		}
		.mini_app_list_block{
			display: flex;
			flex-direction: column;
			
		}
	}

</style>
